<template>
  <n-card>
    <n-form
        ref="addTaskRef"
        :model="addTaskForm"
        :rules="rules"
    >
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="待办" path="title" required>
          <n-input v-model:value="addTaskForm.title" placeholder="写个大概就行" style="text-align: left"/>
        </n-form-item-gi>
        <n-form-item-gi :span="5" label="状态" path="status">
          <n-select v-model:value="addTaskForm.status" :options="taskStatusOptions" placeholder="这个可以不选的嗷"/>
        </n-form-item-gi>
        <n-form-item-gi :span="6" path="public">
          <n-radio-group v-model:value="addTaskForm.public" name="publicStatusGroup">
            <n-radio-button label="大家都能看😀 " :value="true"/>
            <n-radio-button label="就我自己能看😎" :value="false"/>
          </n-radio-group>
        </n-form-item-gi>
        <n-gi :span="2">
          <n-button type="primary" @click="handleValidateClick">
            <template #icon>
              <n-icon>
                <CloudUpload/>
              </n-icon>
            </template>
            存一下吧
          </n-button>
        </n-gi>
        <n-gi :span="2">
          <n-button @click="cancel">
            <template #icon>
              <n-icon>
                <MoodCrazyHappy/>
              </n-icon>
            </template>
            不存啦
          </n-button>
        </n-gi>
        <n-form-item-gi :span="24" label="详情" path="content">
          <n-input
              style="text-align: left"
              v-model:value="addTaskForm.content"
              type="textarea"
              placeholder="列个一二三四五🤔"
              :autosize="{ minRows: 6,maxRows: 6}"
          />
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </n-card>
</template>

<script setup>
import {inject, onMounted, ref, watch} from "vue";
import {CloudUpload, MoodCrazyHappy} from "@vicons/tabler"
import {addTask, updateTask} from "../../api/taskApi.js";

const taskStatusOptions = inject('taskStatusOptions')

const emit = defineEmits('onCommit')

const props = defineProps({
  editData: {
    type: Object,
    default: null
  }
})

const addTaskRef = ref(null)

const addTaskForm = ref({
  public: false
})

const rules = {
  title: [
    {
      required: true,
      message: "不写待办咋用捏😲",
      trigger: 'blur'
    }
  ],
}
watch(() => props.editData, () => {
  setAddTaskForm()
})

onMounted(() => {
  if (props.editData) {
    console.log(props.editData)
    setAddTaskForm()
  }
})

function setAddTaskForm() {
  addTaskForm.value = props.editData
  addTaskForm.value.status = addTaskForm.value.status.code
}

function commit() {
  let handler
  if (addTaskForm.value.id) {
    handler = updateTask
  } else {
    handler = addTask
  }
  handler(addTaskForm.value).then(resp => {
    emit('onCommit', true)
  }).catch(err => console.log(err))
}

function cancel() {
  emit('onCommit', false)
}

function handleValidateClick(e) {
  e.preventDefault();
  addTaskRef.value?.validate((errors) => {
    if (!errors) {
      commit()
    } else {
      console.log(errors);
    }
  });
}
</script>

<style scoped>

</style>